<template>
	<view>
		<view class="header" v-bind:class="{'status':isH5Plus}">
			<view class="userinfo">
				<view class="face"><image src="../../static/HM-PersonalCenter/face.jpeg"></image></view>
				<view class="info">
					<view class="username">{{userinfo.username}}</view>
					<view class="integral">{{userinfo.role_name}}</view>
				</view>
			</view>
			<!-- <view class="setting" @tap="sweepClick"><image src="../../static/HM-PersonalCenter/sweep-code.png"></image></view> -->
		</view>
		<view class="orders">
			<view class="box">
				<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover"  @tap="toOrderType(index)">
					<view class="icon"><view class="badge" v-if="row.badge>0">{{row.badge}}</view><image :src="'../../static/HM-PersonalCenter/'+row.icon"></image></view>
					{{row.name}}
				</view>
			</view>
		</view> 
		<view class="list" v-for="(list,list_i) in severList" :key="list_i">
			<view class="li" v-for="(li,li_i) in list" @tap="toPage(list_i,li_i)" v-bind:class="{'noborder':li_i==list.length-1}"  hover-class="hover" :key="li.name" >
				<view class="icon"><image :src="'../../static/HM-PersonalCenter/sever/'+li.icon"></image></view>
				<view class="text">{{li.name}}</view>
				<image class="to" src="../../static/HM-PersonalCenter/to.png"></image>
			</view>
		</view>
		<view class="bth">
			<button type="primary" @tap="loginOut">退出登录</button>
		</view>
	</view>
</template>
<script>
	import {apiCheckVersion} from '@/common/api.js'
	export default {
		name:'user',
		data() {
			return {
				isH5Plus:false,
				userinfo:{},
				orderTypeLise:[
					//name-标题 icon-图标 badge-角标
					{name:'补卡审批',icon:'l1.png',badge:0},
					{name:'待办任务',icon:'l2.png',badge:0},
					{name:'消息记录',icon:'l4.png',badge:0},
					{name:'打卡记录',icon:'l3.png',badge:0},
					{name:'日志记录',icon:'l5.png',badge:0}
				],
				severList:[
					[
						{name:'个人信息',icon:'personal.png'},
						{name:'我的日报',icon:'daily.png'},
						{name:'审批记录',icon:'approval.png'}
					],
					[
						{name:'版本信息',icon:'version.png'},
						{name:'隐私政策协议',icon:'yinsi.png'},
						{name:'帮助与反馈',icon:'feedback.png'},
						{name:'检查更新',icon:'update.png'}
					]
				],
			};
		},
		onLoad() {
			const userInfo = uni.getStorageSync('user_info')
			if(userInfo){
				this.userinfo = userInfo
			}else{
				this.toast('数据异常')
			}
		},
		methods: {
			//用户点击订单类型
			toOrderType(index){
				switch(this.orderTypeLise[index].name){
					case '打卡记录':
						uni.navigateTo({
							url:'./calendar/calendar'
						})
						break;
					case '补卡审批':
						uni.navigateTo({
							url:'./approval/approval'
						})
						break;
					case '消息记录':
						uni.navigateTo({
							url:'./news/news'
						})
						break;
					case '待办任务':
						uni.navigateTo({
							url:'./task/task'
						})
						break;
					case '日志记录':
						uni.navigateTo({
							url:'./log/log'
						})
						break;
					default:
						this.toast('此功能暂未开放')
						break;
				}
			},
			//用户点击列表项
			toPage(list_i,li_i){
				switch(this.severList[list_i][li_i].name){
					case '个人信息':
						uni.navigateTo({
							url:'./personal/personal?userinfo='+JSON.stringify(this.userinfo)
						})
						break;
					// case '我的日报':
					// 	uni.navigateTo({
					// 		url:'./daily/daily'
					// 	})
					// 	break;
					case '审批记录':
						uni.navigateTo({
							url:'./approval-log/approval-log'
						})
						break;
					case '版本信息':
						uni.navigateTo({
							url:'./version/version'
						})
						break;
					case '隐私政策协议':
						uni.navigateTo({
							url:'/pages/agreement/agreement'
						})
						break;
					// case '帮助与反馈':
					// 	uni.navigateTo({
					// 		url:'./uni-feedback/uni-feedback'
					// 	})
					// 	break;
					case '检查更新': 
						uni.showLoading({
							title:'检查更新中...',
							mask:true
						})
						plus.runtime.getProperty(plus.runtime.appid,(inf)=>{  
							let  wgtVer =inf.version.split('.').join('')
							console.log(wgtVer)
							apiCheckVersion().then(res=>{
								let currentVersion=res.data.data.version_num.split('.').join('')
								uni.hideLoading()
								if(currentVersion > wgtVer){
									uni.showModal({
										title: '更新提醒',
										content: '检测到有新版本，是否更新？',
										confirmText: '去更新'
									}).then(res=>{
										if(res[1].confirm){
											uni.navigateTo({
												url:'/pages/update/update'
											})
										}
										
									})
								}else{
									this.toast('当前是最新版本，无需更新')
								}
							}).catch(err=>{
								uni.hideLoading()
								this.toast('检查更新失败，服务器繁忙')
							})
						});  
						break;
					default:
						this.toast('此功能暂未开放')
						break;
				}
			},
			sweepClick(){
				let that = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						that.toast(res.result)
					}
				});
			},
			loginOut(){
				uni.showModal({
					title: '操作提示',
					content: '你确定退出登录吗？'
				}).then(res=>{
					if(res[1].confirm){
						uni.removeStorageSync('token')
						uni.reLaunch({
							url:'/pages/login/login'
						})
					}
				})
			},
			toast(title,icon='none'){
				uni.showToast({
					title: title,
					mask: true,
					icon:icon,
					duration: 1500
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
page{background-color:#fff}
.header{
	&.status{padding-top:var(--status-bar-height);}
	background-color:#0190a0;width:92%;height:30vw;padding:0 4%;display:flex;align-items:center;
	.userinfo{
		width:90%;display:flex;
		.face{flex-shrink:0;width:15vw;height:15vw;
			image{width:100%;height:100%;border-radius:100%}
		}
		.info{
			display:flex;flex-flow:wrap;padding-left:30upx;
			.username{width:100%;color:#fff;font-size:40upx}
			.integral{display:flex;align-items:center;padding:0 20upx;height:40upx;color:#fff;background-color:rgba(0,0,0,0.1);border-radius:20upx;font-size:24upx}
		}
	}
	.setting{
		flex-shrink:0;width:8vw;height:8.5vw;
		image{width:100%;height:100%}
	}
}
.hover{background-color:#eee}
.orders{
	background-color:#0190a0;width:92%;height:11vw;padding:0 4%;margin-bottom:calc(11vw + 40upx);display:flex;align-items:flex-start;border-radius:0 0 100% 100%;margin-top:0;
	.box{
		width:98%;padding:0 1%;height:22vw;background-color:#fefefe;border-radius:24upx;box-shadow:0 0 20upx rgba(0,0,0,0.15);margin-bottom:40upx;display:flex;align-items:center;justify-content:center;
		.label{
			display:flex;align-items:center;justify-content:center;flex-flow:wrap;width:100%;height:16vw;color:#666666;font-size:26upx;
			.icon{
				position:relative;width:7vw;height:7vw;margin:0 1vw;
				.badge{position:absolute;width:4vw;height:4vw;background-color:#ec6d2c;top:-1vw;right:-1vw;border-radius:100%;font-size:20upx;color:#fff;display:flex;align-items:center;justify-content:center;z-index: 10;}
				image{width:7vw;height:7vw;z-index: 9;}
			}
		}
	}
}
.list{
	width:100%;border-bottom:solid 26upx #f1f1f1;
	.li{
		width:92%;height:100upx;padding:0 4%;border-bottom:solid 1upx #e7e7e7;display:flex;align-items:center;
	&.noborder{border-bottom:0}
		.icon{
			flex-shrink:0;width:50upx;height:50upx;
			image{width:50upx;height:50upx}
		}
		.text{padding-left:20upx;width:100%;color:#666}
		.to{flex-shrink:0;width:40upx;height:40upx}
	}
}
.bth{
	margin: 0 30upx 50upx 30upx;
	padding-bottom:100upx;
}
</style>
